<template>
  <div class="schedule-item" @click="scheduleItemChange">
    <div class="top">
      <span>{{new Date(itemData.workDate).getFullYear()}}年{{new Date(itemData.workDate).getMonth() + 1}}月 {{new Date(itemData.workDate).getDate()}}</span>
      <span>{{item.dayOfWeek}}</span>
    </div>
    <div class="bottom">
      <span>{{ item.availableNumber }}</span>
      <span style="font-size: 16px;margin: 0 2px 0 2px;color: #555">/</span>
      <span>{{ item.reservedNumber }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, watch } from "vue";

const props = defineProps(["item"])
const itemData = ref({})

watch(() => props.item, (newVal, oldVal) => {
  itemData.value = newVal;
  console.log("itemData",newVal)
},{immediate: true})

const emit = defineEmits(["itemChange"])
import {formatToDate} from "@/utils/dateUtil";

const scheduleItemChange = () => {
  console.log("itemData", itemData.value.workDate)
  emit("itemChange", formatToDate(itemData.value.workDate))
}
</script>

<style scoped lang="less">
.schedule-item {
  width: 130px;
  height: 80px;
  display: inline-flex;
  margin: 8px 8px 0 0;
  border-radius: 5px;
  flex-direction: column;
  justify-content: space-around;
  background-color: #cccccc;

  .top, .bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .bottom {
    justify-content: center;

    span {
      height: 20px;
      line-height: 20px;
      font-size: 20px;
    }
  }
}
</style>
